.settings-container-contain
    z-index 1
    background-color $BgColor1
    height 100%
    width calc(100% - 5px)
    position fixed
    scrollable()
    padding-top: $TitleHeight + 10px
    &::-webkit-scrollbar-track
        margin-top: $TitleHeight
        margin-bottom 5px

    .settings-container
        z-index 1
        width 100%
        height auto
        position absolute
        background-color $BgColor1
        -webkit-user-select none
        padding-bottom 20px

        section
            display: flex
            flex-direction: row
            justify-content: flex-start
            flex-flow: row wrap
            width 92%
            margin-left auto
            margin-right auto
            position relative

            .title
                padding-top 26px
                color $SettingsCategoriesText
                font-family $Font, $AlternateFont
                font-size 17px
                width 160px
                margin-right 30px
                position relative
                border-right 1px solid $SettingsSeparator

            .content
                position relative
                padding-top 30px
                padding-left 10px
                float right
                width calc(100% - 190px)
                height 100%
                color $SettingsText1
                font-family $Font, $AlternateFont
                font-size 13px
                border-bottom 1px solid $SettingsSeparator

                span
                    float left
                    width 100%
                    height 40px

                    p
                        min-width 158px
                        color $SettingsText1
                        font-family $Font, $AlternateFont
                        font-size 13px
                        float left

                    em
                        color $SettingsText2
                        font-size 12px

                    #downloadsDir,
                    #protocolEnc
                        &:hover + em
                            opacity 1

                        + em
                            padding-left 14px
                            cursor default
                            opacity 0
                            transition opacity 200ms ease

                            &:hover
                                opacity 0

            /* overlay styles, all needed */
        .modal-overlay
            display none
            position fixed
            top 0
            left 0
            height 100%
            width 100%
            background-color rgba(0,0,0,0.5)
            z-index 99998

        .modal-content
            display none
            position fixed
            width 360px
            top 35%
            left 50%
            margin-left -180px
            background-color $BgColor2
            -webkit-border-radius 5px
            border-radius 5px
            border 1px solid $BgColor2
            padding 20px 20px 15px
            z-index 99999 /* 1px higher than the overlay layer */
            .modal-close
                color #000
                cursor pointer
                position absolute
                top -11px
                right -10px
                background white
                border-radius 51px
                padding 0
                width 21px
                height 21px


            #qrcode
                margin 0 59px 3px
                background-color #fff
                border-radius 5px

        .poster_size > select
            width 62px

        #title
            .title
                color $Text1
                padding-top 5px
                font-size 22px

            .content
                padding-top 5px
                height 30px
                border-bottom 1px solid transparent

                label
                    margin-top -7px

                .keyboard,.help,.about
                    font-size: 21px
                    margin-right: 25px
                    color: $Text3
                    cursor pointer
                    transition all .5s

                    &:hover
                        color: $Text1
                        transition all .5s

        #user-interface
            .subtitles-language > select,
            .pct-theme > select,
            .start-screen > select,
            .watchedCovers > select,
            .defaultFilters > select,
            .tv_detail_jump_to > select
                width 158px

        #localisation
            .subtitles-language > select,
            .translateTitle > select
                width 158px

            label#contentLangOnly
                margin-left 16px

        #subtitles
            .subtitles-language-default > select,
            .subtitles-font > select,
            .subtitles-decoration > select
                width 158px

            .subtitles-size > select
                width 62px

            .subtitles-custom > .settings-label
                margin-left 40px

            .subtitles-custom
                .colorsub
                    cursor pointer

        #features
            .trakt-options
                color $SettingsText1
                display inline-flex
                margin-left 20px

                a
                    display inline-block

                .unauthtext,
                .syncTrakt
                    color $ButtonBgActive
                    &:hover{ color: $ButtonBgHover; }

        #tvshowtime
            .tvshowtime-options
                margin-bottom 35px

                a
                    display inline-block

                .unauthtext
                    margin-left 5px
                    color $ButtonBgActive
                    &:hover{ color: $ButtonBgHover; }

                #connect-with-tvst
                    margin-top -12px

                .tvst-loading-spinner
                    animation-duration 0.75s
                    animation-iteration-count infinite
                    animation-name rotate-forever
                    animation-timing-function linear
                    width 15px
                    height 15px
                    border 3px solid #2d75df
                    border-right-color transparent
                    border-radius 50%
                    display inline-flex
                    position absolute
                    left 0
                    margin-left 20px
                    margin-top -2px

        #subtitles
            .opensubtitles-options
                color $SettingsText1

                a
                    display inline-block

                .unauthtext
                    margin-left 5px
                    color $ButtonBgActive
                    &:hover{ color: $ButtonBgHover; }

                .loading-spinner
                    animation-duration 0.75s
                    animation-iteration-count infinite
                    animation-name rotate-forever
                    animation-timing-function linear
                    width 20px
                    height 20px
                    border 4px solid #2d75df
                    border-right-color transparent
                    border-radius 50%
                    display inline-flex
                    margin-left -27px
                    margin-top -9px

                .invalid-cross
                    width 20px
                    height 20px
                    display inline-flex
                    margin-left -27px

                    &:before
                        content "\2573"
                        font-family Arial
                        font-size 12px
                        font-weight bolder
                        text-shadow 0 0 10px #EE3030
                        color #EE3030

                .valid-tick
                    width 20px
                    height 20px
                    display inline-flex
                    margin-left -27px
                    margin-top -9px

                    &:before
                        content "\2714"
                        font-family Arial
                        font-size 17px
                        font-weight bold
                        text-shadow 0 0 10px #4EEE30
                        color #4EEE30
                        position relative
                        top 2px

                .syncOpensubtitles,
                .createOpensubtitles
                    color $ButtonBgActive

                    &:hover
                        color $ButtonBgHover

        #remote-control
            .content
                .qr-code
                    font-size 15px
                    margin-left 158px
                    vertical-align middle
                    cursor pointer
                    transition all .5s

                    &:hover
                        color $ButtonBgActive

                #settingsIpAddr, #httpApiPort, #httpApiUsername, #httpApiPassword
                    width 166px

        #apiserver,
        #miscellaneous
            input
                text-overflow ellipsis

            .valid-tick
                width 20px
                height 20px
                display inline-flex
                line-height 12px

                &:before
                    content "\2714"
                    font-family Arial
                    font-size 17px
                    font-weight bold
                    text-shadow 0 0 10px #4EEE30
                    color #4EEE30
                    position relative
                    top 1px

            .invalid-cross
                width 20px
                height 20px
                display inline-flex
                line-height 12px
                vertical-align top

                &:before
                    content "\2573"
                    font-family Arial
                    font-size 12px
                    font-weight bolder
                    text-shadow 0 0 10px #EE3030
                    color #EE3030

        #connection
            #overallRatio
                pointer-events: none
                -webkit-user-select: none

                i
                    padding-left: 4px
                    padding-right: 8px

            select
                padding-left 10px
                border 0 !important
                -webkit-appearance none
                height 30px
                line-height 24px
                margin-top -9px
                background-color $InputBoxBg
                cursor pointer
                color $InputBoxText
                font-family $Font, $AlternateFont
                font-size 13px
                outline 0
                padding-right 10px
                width: 62px

            .dropdown-arrow
                width 0
                height 0
                border-left 4px solid transparent
                border-right 4px solid transparent
                border-top 5px solid $Text2
                top 12px
                margin-left -13px
                position relative
                float none
                cursor pointer

            .reset-tvAPI
                font-size: 13px
                color: $SettingsText2
                transition: all .5s
                &:hover
                    cursor: pointer
                    color: $ButtonBgActive
                    transition: all .5s

        #cache
            .open-tmp-folder,
            .open-downloads-folder
                font-size: 16px
                margin-left: 10px
                transition: all .5s
                &:hover
                    cursor: pointer
                    color: $ButtonBgActive
                    transition: all .5s

            .del-seedbox-cache > select
                width: 158px

        #database
            .open-database-folder
                font-size: 16px
                margin-left: 6px
                transition: all .5s
                &:hover
                    cursor: pointer
                    color: $ButtonBgActive
                    transition: all .5s

            .import-db
                margin-left: 7px
                padding: 0 1px
                cursor: pointer
                transition: all .5s
                &:hover
                    color: $ButtonBgActive

            .export-database
                margin-left: 1px
                padding: 0 1px
                cursor: pointer
                transition: all .5s
                &:hover
                    color: $ButtonBgActive

        .set-current-filter,
        .reset-current-filter,
        .update-dht,
        .update-app
            font-size: 13px
            margin: 0 2px 0 8px
            transition: all 0.5s
            cursor: pointer
            &:hover
                color: $ButtonBgActive

        .closeTraktCode
            font-size: 13px
            margin: 0 2px 0 8px
            transition: all 0.5s
            cursor: pointer
            &:hover
                color: #ee3030

        .reset-current-filter.disabled
            color: inherit
            opacity: 0.3
            cursor: default

        .btns
            padding-top 10px
            padding-right 2%
            float right
            &.database
                float left
                padding-top 0
                padding-bottom 8px

        .btn-settings
            position relative
            margin-top 13px
            float left
            padding-left 10px
            padding-right 10px
            margin-right 20px
            border-radius $ButtonRadius
            height 35px
            background-color $ButtonBg
            text-align center
            color $SettingsButtonText
            font-family $ButtonFont, $AlternateFont
            font-size 12px
            line-height 34px
            cursor pointer
            transition background-color .5s
            &> label
                cursor pointer
            &.database
                margin-top: 0
            &:hover
                background-color $ButtonBgHover
                color $SettingsButtonTextHover
                text-decoration none
            &.disabled
                background-color $ButtonBgDisabled
                &:hover
                    background-color $ButtonBgDisabled
                &:active
                    background-color $ButtonBgDisabled

            &.ok
                background-color $ButtonBgOk
            &.warning
                background-color $ButtonBgWarning
            &:active
                box-shadow: inset 0 1px 4px rgba(0,0,0,0.6)
                background: $ButtonBgActive

        .dropdown
            select
                margin-left 10px
                position relative
                padding-left 5px
                border 0 !important
                -webkit-appearance none
                height 30px
                line-height 25px
                margin-top -9px
                background-color $InputBoxBg
                cursor pointer
                color $InputBoxText
                font-family $Font, $AlternateFont
                font-size 13px
                float left
                outline 0
                padding-right 15px

            option
                background $InputBoxBg
                border 0 !important
                outline 0

            .dropdown-arrow
                width 0
                height 0
                border-left 4px solid transparent
                border-right 4px solid transparent
                border-top 5px solid $Text2
                top 4px
                margin-left -13px
                position relative
                float left
                cursor pointer

    .success_alert
        position fixed
        top 45px
        right 50px
        color $Text1
        font-family $MainFont, $AlternateFont
        font-size 16px

        #checkmark-notify
            display inline-block
            width 20px
            height 20px
            transform rotate(45deg)

        #stem-notify
            position absolute
            width 3px
            height 12px
            background-color $Text1
            left 11px
            top 6px

        #kick-notify
            position absolute
            width 6px
            height 3px
            background-color $Text1
            left 6px
            top 15px

    input[type="text"], input[type="password"], input[type="number"], input[type="color"]
        margin-left 10px
        margin-top -9px
        padding-left 10px
        height 30px
        border 0 !important
        line-height 15px
        background-color $InputBoxBg
        resize none
        color $InputBoxText
        font-family $Font, $AlternateFont
        font-size 13px
        cursor text
        outline 0 !important

        &#fakedatabaseLocation
            pointer-events: none
            -webkit-user-select: none

        &#fakedatabaseLocation,&#settingsIpAddr
            pointer-events: none
            -webkit-user-select: none

    input[type='color']
        -webkit-appearance: none
        width 62px
    input[type='color']::-webkit-color-swatch
        margin: 3px -9px 3px -3px

    input[type='number']::-webkit-inner-spin-button
        -webkit-appearance: none
        margin: 0

    input[type=checkbox]
        &.settings-checkbox
            position: absolute
            overflow: hidden
            clip: rect(0 0 0 0)
            height:1px
            width:1px
            margin:-1px
            padding:0
            border:0

        &.settings-checkbox+label.settings-label
            height:15px
            display:inline-block
            line-height:15px
            font-size:13px
            font-family: $Font, $AlternateFont
            vertical-align:middle
            cursor:pointer
            color:$SettingsText1

        &.settings-checkbox:checked+label.settings-label
            &:after
                opacity: 1

    input[type="text"]
        &#downloadLimit
            width: 78px
        &#uploadLimit
            width: 78px
            margin-left: 7px

    .settings-label
        &:before
            content: '\f0c8'
            font-family: "Font Awesome 6 Free"
            font-weight: 900
            font-size: 18px
            padding-right: 8px
            float: left
            position: relative
            color: $CheckboxBg
        &:after
            content: '\f00c'
            font-family: "Font Awesome 6 Free"
            font-weight: 900
            font-size: 12px
            margin-right: -14px
            color: $CheckboxCheck
            position: relative
            float: left
            left: -21px
            opacity: 0
            transition: opacity .1s ease-in-out

    .settings-container-check-settings
        width 14px
        height 14px
        margin-top 59px
        position relative
        label
            cursor pointer
            position absolute
            top 0
            width 14px
            height 14px
            border-radius 3px
            background-clip padding-box
            background-color $InputBoxBg

            &:after
                opacity 0
                content ''
                position absolute
                width 10px
                height 6px
                background transparent
                top 2px
                left 2px
                border 3px solid $ButtonBgActive
                border-top none
                border-right none
                transform rotate(-45deg)
        input[type=checkbox]:checked
            & + label
                &:after
                    opacity 1

@keyframes rotate-forever
    0%
        transform rotate(0deg)
    100%
        transform rotate(360deg)

.settings-container
    section
        &.advanced
            display: none
    .advanced
        display: none

.default-frame
    .settings-container-contain
            padding-top 0
            .close-icon
                top 5px
        &::-webkit-scrollbar-track
            margin-top: $FilterBarHeight
        .close-icon
            top 45px
